<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- <meta http-equiv="refresh" content="60; url=four.html" /> -->
    <meta charset="UTF-8">
    <title>operate</title>
    <script src="./js/jquery-3.2.1.js"></script>
    <script src="./js/vue.min.js"></script>
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
        }

        .animationg-conent {
            width: 3840px;
            height: 1080px;
            overflow: hidden;
            position: relative;
        }


        .operate-conent::-webkit-scrollbar,
        body::-webkit-scrollbar {
            display: none;
        }

        .animationg-conent .imglists {
            display: flex;
            position: relative;
            overflow: hidden;
            height: 1080px;
        }

        .imglists .item-img {
            cursor: pointer;
            position: absolute;
            display: flex;
            align-items: center;
            width: 350px;
            height: 350px;
        }

        .imglists .item-img img {
            width: 100%;
            height: 100%;
        }

        .imglists .item-img:nth-child(1) {
            top: 365px;
            left: 225px;
        }

        .imglists .item-img:nth-child(2) {
            top: 563px;
            left: 801px;
        }

        .imglists .item-img:nth-child(3) {
            top: 324px;
            left: 1322px;
        }

        .imglists .item-img:nth-child(4) {
            top: 536px;
            left: 1825px;
        }

        .imglists .item-img:nth-child(5) {
            top: 360px;
            left: 2333px;
        }

        .imglists .item-img:nth-child(6) {
            top: 629px;
            left: 2850px;
        }

        .imglists .item-img:nth-child(7) {
            top: 323px;
            left: 3366px;
        }

        /* 动态效果 */
        .big-content {
            overflow: hidden;
            position: relative;
            background: url('./newImg/animaBg.png') no-repeat;
            transition: width 1s linear;
        }

        /* .bigBg {
           
            height: 1080px;
            width: 0px;
            position: absolute;
            transition: width 1s;
        } */
        .scroll-reel {
            position: absolute;
            height: 1080px;
            transition: left 1s linear;
            z-index: 2;
        }

        /* .imglists {
            transition: width 1s;
        } */
        /* 中间字体大小控制 */
        .curImg {
            transform: scale(1.5);
            transition: transform 1s linear;
        }

        .sximg {
            transform: scale(1);
            transition: transform 1s linear;
        }

        /* 中间字体大小控制 end */
        /* 动态效果 end */
    </style>
</head>

<body>
    <div class="animationg-conent" id="app">
        <img v-if="isShow" src="./newImg/255.png" class="scroll-reel"
            :style="{left:(curIndex>5 ? bigBgWidth : bigBgWidth-20)+'px'}">
        <div class="big-content" :style="{width:bigBgWidth+'px'}">
            <div class="imglists">
                <!-- @mouseenter="selectImg(index)" -->
                <div class="item-img" v-for="(item,index) in imgLists"
                    :class="{curImg:curIndex===index,sximg:(curIndex-1)===index}" @click="selectImg(index)">
                    <img class="bgImg" :src="item.smimgSrc"/>
                    <!-- <img v-else class="smImg" :src="item.bgImgSrc" /> -->
                </div>

            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                curIndex: 0,
                bgSrc: 'bigImg.png',
                imgLists: [
                    { id: 0, smimgSrc: 'newImg/交.png', bgImgSrc: 'newImg/交-.png', show: false },
                    { id: 1, smimgSrc: 'newImg/运.png', bgImgSrc: 'newImg/运-.png', show: false },
                    { id: 2, smimgSrc: 'newImg/仓.png', bgImgSrc: 'newImg/仓-.png', show: false },
                    { id: 3, smimgSrc: 'newImg/园.png', bgImgSrc: 'newImg/园-.png', show: false },
                    { id: 4, smimgSrc: 'newImg/管.png', bgImgSrc: 'newImg/管-.png', show: false },
                    { id: 5, smimgSrc: 'newImg/数.png', bgImgSrc: 'newImg/数-.png', show: false },
                    { id: 6, smimgSrc: 'newImg/金.png', bgImgSrc: 'newImg/金-.png', show: false }
                ],
                left: 40,
                isShow: true,
                bigBgWidth: 0,

            },
            created() {
                /*
                **  此处为停顿效果
                *** 若不停顿 则设置css中 transition: width 1s;重新设置秒数
                *** 且 this.bigBgWidth = 3840
                *** 延时效果中不设置this.bigBgWidth
                */
                setTimeout(() => {
                    // 首次滚动宽度
                    this.bigBgWidth = 757
                }, 500)
                let timers = setInterval(() => {
                    // 滚动宽度设置
                    if (this.curIndex < 5) {
                        this.bigBgWidth += 510
                    } else if (this.curIndex === 5) {
                        this.bigBgWidth += 533
                    }
                    // 滚动宽度设置end
                    if (this.curIndex < 7) {
                        this.curIndex++
                    } else {
                        clearInterval(timers)
                    }
                }, 2000)  //此处调节停顿时间

            },
            methods: {
                selectImg(val) {
                    this.curIndex = val;
                },
            },
        })
    </script>
    <script>
        $(function () {
            // $("body").click(function () {
            //     window.location.href = "./park.html"
            // })
        })
    </script>
</body>

</html>